import React, { useState } from 'react'
import Taro from '@tarojs/taro'
import {View,Image,Text, Input, Picker,Textarea} from '@tarojs/components'
import './index.scss'

export default function CinemaPackage() {
  const [curTabs,setCurTabs] = useState(0)
  const [params,setParams] = useState({
    store:0
  })
  const storeList = ['上海影城']
  return (
    <View className='cinema-package'>
      <View className="package-tabs">
        {['影院包场','云包场'].map((res,idx)=>{
          return <View className={`tabs-item ${idx == curTabs?'active':''}`} onClick={()=>{
            setCurTabs(idx)
          }}>{res}</View>
        })}
      </View>
      
      {curTabs == 0?<View className="package-cinema">
        <View className="cinema-header"></View>
        <View className="cinema-main">
          <View className="main-box">
            <View className="main-title">预定人信息</View>
            <View className="main-form box-flex">
              <View className="label">姓名</View>
              <Input placeholder='请输入姓名，不超过10个字' maxlength={10} />
            </View>
            <View className="main-form box-flex">
              <View className="label">手机号</View>
              <Input placeholder='请输入姓名，不超过10个字' maxlength={10} />
            </View>
          </View>
          
          <View className="main-box">
            <View className="main-title">包场信息</View>
            <Picker style="margin-bottom:28px" range={storeList} onChange={e=>{
              setParams({
                ...params,store:e.detail.value
              })
            }}>
              <View className="form-picket">
                {storeList[params?.store]}
                <Text className='at-icon at-icon-chevron-down' style={{color:'#A5A6A9'}}></Text>
              </View>
            </Picker>
            <View className="main-form">
              <View className="label">开场时间</View>
              <View className="form-radio">
                <View className="radio-item">4-12 周四 19:30 <Text className='item-icon'>9.2折起</Text></View>
                <View className="radio-item">4-13 周四 19:30</View>
              </View>
            </View>
            <View className="main-form">
              <View className="label">座位数</View>
              <View className="form-radio">
                <View className="radio-item">20-100座</View>
                <View className="radio-item">100-200座</View>
              </View>
            </View>
            <View className="main-form">
              <View className="label">包场用途</View>
              <View className="form-radio">
                <View className="radio-item">影迷观影</View>
                <View className="radio-item">公司活动</View>
              </View>
            </View>
            <View className="main-form">
              <View className="label">备注</View>
              <Textarea className='form-textarea' autoHeight placeholder='选填，不超过50个字' maxlength={50} />
            </View>
          </View>
        </View>
        <View className="cinema-footer">
          <View className="footer-button">提交</View>
        </View>
      </View>:<View className='package-cloud'>
        <View className="cloud-main">
          <View className="main-box">
            <View className="main-title">包场票</View>
            <View className="main-form box-flex">
              <View className="label">票价金额</View>
              <Picker style={{marginLeft:'auto'}}>
                <View className="form-picket">
                  50元
                  <Text className='at-icon at-icon-chevron-right' style={{color:'#A5A6A9'}}></Text>
                </View>
              </Picker>
            </View>
            <View className="main-form box-flex">
              <View className="label">票价数量</View>
              <Picker style={{marginLeft:'auto'}}>
                <View className="form-picket">
                  50元
                  <Text className='at-icon at-icon-chevron-right' style={{color:'#A5A6A9'}}></Text>
                </View>
              </Picker>
            </View>
            <View className="main-form box-flex">
              <View className="label">包场价格</View>
              <Input style={{textAlign:'right'}} maxlength={10} />元
            </View>
          </View>
          
          <View className="main-box">
            <View className="main-title">
              包场方式
              <View className="title-span">使用详解 <Text className='at-icon at-icon-chevron-right'></Text></View>
            </View>
            <View className="cloud-way">
              <View className="way-item active">
                <View className="h2">普通包场</View>
                无需确认，好友扫码即可领取
              </View>
              <View className="way-item">
                <View className="h2">邀请包场</View>
                通过手机号邀请的用户可以领取
              </View>
              <View className="way-item">
                <View className="h2">定向包场</View>
                好友申请后，可批量确认再发放
              </View>
            </View>
          </View>
          
          <View className="main-box">
            <View className="main-form box-flex" style={{padding:'14px 0'}}>
              <View className="label" style={{fontWeight:500,fontSize:'16px'}}>定制邀请海报</View>
              <Picker style={{marginLeft:'auto'}}>
                <View className="form-picket" style={{fontSize:12}}>
                  <Image src='https://img1.baidu.com/it/u=3486651663,3991438881&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' style={{width:20,height:20,borderRadius:'50%',marginRight:'2px'}} mode='widthFix'></Image>
                  @张家
                  <Text className='at-icon at-icon-chevron-right' style={{color:'#A5A6A9'}}></Text>
                </View>
              </Picker>
            </View>
          </View>
          <View className="main-box">
            <View className="main-title">服务说明</View>
            <View className="service-list">
              <View className="list-item">
                <Image src={require('@/images/home/time.svg')} className="item-icon"></Image>
                <View className='p'>48小时领取</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/refund.svg')} className="item-icon"></Image>
                <View className='p'>未领取极速退</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/ticket.svg')} className="item-icon"></Image>
                <View className='p'>未购票全额退</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/date.svg')} className="item-icon"></Image>
                <View className='p'>15天有效期</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/write-off.svg')} className="item-icon"></Image>
                <View className='p'>核销计入票房</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/invoice.svg')} className="item-icon"></Image>
                <View className='p'>发票说明</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/use.svg')} className="item-icon"></Image>
                <View className='p'>全端使用</View>
              </View>
              <View className="list-item">
                <Image src={require('@/images/home/hot.svg')} className="item-icon"></Image>
                <View className='p'>带动热度</View>
              </View>
            </View>
          </View>
        </View>
        <View className="cloud-footer">
          <View className="footer-info">
            <View className="info-price">合计 <Text style={{color:'#274BFB'}}>￥</Text> <Text style={{fontSize:'20px',color:'#274BFB'}}>428.90</Text></View>
            <View className="info-p"><Text style={{color:'#f73'}}>共优惠11元，</Text>查看明细 <Text className='at-icon at-icon-chevron-right'></Text></View>
          </View>
          <View className="footer-button">确认支付</View>
        </View>
      </View>}
    </View>
  )
}
